<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="https://jf.10086.cn/static/headicon.png" />
    <title>中国移动积分商城购物车页面</title>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" href="../css/shouye.css" />

    <script src="../js/jquery.js"></script>
    <style>
        #gouwuche {
            width: 1200px;
            margin: 0 auto;
        }

        #box1 {
            width: 1200px;
        }

        .Toptitlt {
            width: 1200px;
            height: 50px;
            background: coral;
        }

        .th {
            float: left;
            font-size: 14px;
            line-height: 50px;

        }

        .th-chk {
            margin-left: 10px;
            width: 50px;
            font-size: 14px;
            text-align: center;
            position: relative;
            height: 50px;
        }

        .th-chk input {
            position: absolute;
            z-index: 0;
            left: -5px;
            top: 19px;
        }

        .th-item {
            width: 564px;
            padding-left: 60px;
        }

        .th-price {
            width: 130px;
        }

        .th-num {
            width: 120px;
        }

        .th-sum {
            width: 140px;
        }

        .th-do {
            width: 119px;
        }

        #box2 {
            width: 1200px;
        }

        .shopping {
            width: 1200px;
            height: 150px;
            /* background: rgb(12, 233, 23); */
        }

        .td {
            float: left;
            line-height: 150px;
        }

        .td-chk {
            margin-left: 10px;
            width: 50px;
            font-size: 14px;
            text-align: center;
            position: relative;
            height: 150px;
        }

        .td-item {
            width: 514px;
            padding-left: 60px;
        }

        .td-item img {
            margin-top: 15px;
            margin-right: 20px;
            width: 120px;
            height: 120px;
            float: left;
        }

        .td-price {
            width: 130px;
            text-align: center;
            font-size: 16px;
        }

        .td-num {
            width: 130px;
            height: 150px;
        }

        .td-bianji {
            display: flex;
            height: 30px;
            width: 100px;
            margin: 0 auto;
            /* align-items: center; */
            margin-top: 60px;
            text-align: center;

        }

        .zhong {
            line-height: 30px;
        }

        .num {
            width: 30px;
            height: 30px;
            line-height: 30px;
            outline: none;
            border: none;
            text-align: center;
        }

        .jia,
        .jian {
            width: 30px;
            height: 30px;
            line-height: 30px;
            /* border: 1px black solid; */

        }

        .td-allprice {
            text-align: center;
            width: 130px;
            font-size: 16px;
            color: rgb(243, 116, 12);
        }

        .td-btn {
            width: 155px;
            text-align: center;
            margin-right: 20px;
        }

        .td-btn button {
            /* background: linear-gradient(128deg, #ffa324 13%, #fe6f00 96%); */
            background: linear-gradient(315deg, #f18a14, #f75f08);
            color: #fff;
            width: 100px;
            font-size: 16px;
            border-radius: 10px;
            height: 30px;
        }
        #totalPrice{
            margin-left: 10px;
              height: 30px;
             font-size: 18px;
             margin-top: 10px;
             color: #f6f6f6;
        }
        #totalPrice span{
            margin-left: 10px;
            margin-right: 10px;
            font-size: 18px;
        }
        .jiesuan{
            width: 100px;
            height: 50px;
            text-align: center;
             font-size: 16px;
             line-height: 50px;
             /* margin-top: 10px; */
            background-color: red;
             color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <!-- 顶部导航栏 -->
            <div id="top">
                <div class="container fx cl666">
                    <div id="ccc">
                        <span>您好，欢迎访问中国移动积分商城</span>
                        <a href="./Login.html"><span class="clRed ml30 pointer"> 请登录 </span></a>
                    </div>
                    <div id="ccc1" style="display: none">
                        <span class="ml10">您好</span>
                        <span></span>
                        <span class="pointer ml10 clRed">退出</span>
                    </div>
                    <div class="topright fx">
                        <div class="tab-top pointer tab-top1" style="display: none">
                            我的账户
                        </div>
                        <div class="tab-top pointer">购物车</div>
                        <div class="tab-top">
                            手机版
                            <i class="icon iconfont icon-xiangxiajiantou"></i>
                            <div class="hide-top" style="display: none">
                                <div class="app-code">
                                    <img src="https://jf.10086.cn/static/img/APPcode.4a1af6e.png" />
                                </div>
                                <p>中国移动</p>
                                <p>手机营业厅</p>
                            </div>
                        </div>
                        <div class="tab-top">
                            客户服务
                            <i class="icon iconfont icon-xiangxiajiantou"></i>
                            <div class="hide-top" style="display: none">
                                <p class="top-menu">帮助中心</p>
                            </div>
                        </div>
                        <div class="tab-top">
                            网站导航
                            <i class="icon iconfont icon-xiangxiajiantou"></i>
                            <div class="hide-top" style="display: none">
                                <p class="top-menu">中国移动首页</p>
                                <p class="top-menu">移动商城</p>
                                <p class="top-menu">139邮箱</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第二部分 -->
            <div class="h120" id="h120">
                <div class="searchbox">
                    <div class="container fx">
                        <!-- 开始logo -->
                        <div class="logo">
                            <a href="http://localhost:8080/html/shouye.html"><img src="	https://jf.10086.cn/static/img/logo.fccfc0f.png" alt="" style="width: 100%" /></a>
                        </div>
                        <!-- 中间部分 -->
                        <div class="seabox">
                            <div class="seaboxtop seaboxtop-input">
                                <!-- seaboxtop-input-right -->
                                <input type="text" autocomplete="off" maxlength="15" id="seabox" class="seaboxinner"
                                    value="你好" />
                                <div class="seaboxtop-input-right">
                                    <button class="seabtn">
                                        <i class="icon1 iconfont icon-sousuo"></i>
                                    </button>
                                </div>
                            </div>
                            <!-- 隐藏的ul,用于存放搜索接口的数据 -->
                            <ul class="selectList"></ul>
                            <!-- 热搜词，正常的应该是使用接口，输入后台传来的热搜数据 -->
                            <div class="hots">
                                <span>热门搜索：</span>
                                <span class="hotitem">爱奇艺</span>
                                <span class="hotitem">腾讯</span>
                                <span class="hotitem">流量</span>
                                <span class="hotitem">蓝牙耳机</span>
                                <span class="hotitem">耳机</span>
                                <span class="hotitem">优酷</span>
                                <span class="hotitem">和平精英</span>
                            </div>
                        </div>
                        <!-- 结束二维码 -->
                        <div class="scan">
                            <div class="scanCode">
                                <img src="	https://jf.10086.cn/static/img/hejifen.ece7db2.jpg" alt="" />
                            </div>
                            <span class="mt8">积分商城微信公众号</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 购物车部分 -->

            <div id="gouwuche">
                <div id="box1">
                    <div class="Toptitlt">
                        <div class="th th-chk"><input type="checkbox" id="checkAll" />全选</div>
                        <div class="th th-item">商品信息</div>
                        <div class="th th-price">单价</div>
                        <div class="th th-num">数量</div>
                        <div class="th th-sum">金额</div>
                        <div class="th th-do">操作</div>
                    </div>
                </div>

                <div id="box2">



                </div>
                <div class="Toptitlt">
                    <div class="last" style="display: flex; justify-content: space-between;">
                    <div id="totalPrice">总价：<span></span>积分</div>
                    <div class="jiesuan">结算</div>
                    </div>
                </div>


            </div>

        </div>
        <script>
            let udpdata = JSON.parse(localStorage.getItem("udpdata"));
            // console.log(udpdata);
            let udpid = udpdata.data.id;
            if(!udpid){
                window.location.href = "http://localhost:8080/html/Login.html"
            }

            let flag;
            if ((flag = udpid)) {
                $("#ccc1").css({ display: "block" });
                $("#ccc1 span").eq(1).text(udpdata.data.username);
                $("#ccc").css({ display: "none" });
                $(".tab-top1").css({ display: "block" });
            }
            $(".ml10").click(function () {
                $("#ccc1").css({ display: "none" });
                $("#ccc").css({ display: "block" });
                $(".tab-top1").css({ display: "none" });
                delete udpdata.data.id;
                console.log(udpdata);
                localStorage.setItem("udpdata", JSON.stringify(udpdata));
                window.location.href = "http://localhost:8080/html/Login.html";
            });
        </script>

        <script>
            // let udpid = window.location.search.replace("?", "");

            // console.log(spid);
            $.ajax({
                type: "get",
                url: "http://jx.xuzhixiang.top/ap/api/cart-list.php",
                data: { id: udpid },
                dataType: "json",
                success: function (data) {
                    console.log(data);

                    let str = "";
                    data.data.forEach((item) => {
                        str += `
                        <div class="shopping" data-id ="${item.pid}">
                        <div class="td td-chk"><input type="checkbox" class="ck" /></div>
                        <div class="td td-item">
                            <div class="img"><a href="http://localhost:8080/html/xiangqing.html?${item.pid}"><img src="${item.pimg}"></a></div>
                            <span class="jieshao">${item.pdesc}</span>
                        </div>
                        <div class="td td-price">${item.pprice}</div>
                        <div class="td td-num">
                            <div class="td-bianji">
                                <div class="jian">➖</div>
                                <div class="zhong"><input type="text" value="${item.pnum}" class="num"></div>
                                <div class="jia">➕</div>
                            </div>
                        </div>
                        <div class="td td-allprice">${item.pnum * parseInt(item.pprice)}</div>
                        <div class="td td-btn"><button>删除</button></div>
                    </div>`;
                    })
                    $("#box2").html(str);
                    
                    //  减少购物车物品数量  
                    $(".jian").click(function () {
                        let num = $(this).parent().find(".num").val();
                        num--;
                        if (num < 1) {
                            num = 1;
                        }
                        $(this).parent().find(".num").val(num);
                        let price = parseInt($(this).parent().parent().parent().find(".td-price").text()) * num;

                        $(this).parent().parent().parent().find(".td-allprice").text(price);
                        // console.log($(this).parent().parent().parent().find(".td-allprice").text());
                        let id = $(this).parent().parent().parent().data("id");
                        // console.log(id);

                        $.ajax({
                            type: "get",
                            url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                            data: {
                                uid: udpid,
                                pid: id,
                                pnum: num,
                            },
                            dataType: "json",
                            success: function (data) {
                                // console.log(data);
                            }
                        });
                        let count = $(".ck:checked").length;
                      
                        
                        if (count === $(".ck").length) {
                            $("#checkAll").prop("checked", true);
                        } else {
                            $("#checkAll").prop("checked", false);
                        } 
                        getTotalPrice(); 

                    })

                    // 增加购物车物品数量
                    $(".jia").click(function () {
                        let num = $(this).parent().find(".num").val();
                        num++;

                        $(this).parent().find(".num").val(num);
                        let price = parseInt($(this).parent().parent().parent().find(".td-price").text()) * num;

                        $(this).parent().parent().parent().find(".td-allprice").text(price);
                        // console.log($(this).parent().parent().parent().find(".td-allprice").text());
                        let id = $(this).parent().parent().parent().data("id");
                        console.log(id);

                        $.ajax({
                            type: "get",
                            url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                            data: {
                                uid: udpid,
                                pid: id,
                                pnum: num,
                            },
                            dataType: "json",
                            success: function (data) {
                                // console.log(data);
                            }
                        });

                        let count = $(".ck:checked").length;
                        // console.log(count); 
                        
                        // console.log($(".ck").length);
                        if (count === $(".ck").length) {
                            $("#checkAll").prop("checked", true);
                        } else {
                            $("#checkAll").prop("checked", false);
                        } 
                        getTotalPrice(); 

                    })

                    //  直接修改购买数量时
                    $(".num").blur(function () {
                        let num = $(this).val();
                        // console.log(Number(num));
                        
                        if (num < 1||Number(num)+""=="NaN") {
                            num = 1;
                        }
                        $(this).val(num);
                        let price = parseInt($(this).parent().parent().parent().parent().find(".td-price").text()) * num;

                        $(this).parent().parent().parent().parent().find(".td-allprice").text(price);
                        // console.log($(this).parent().parent().parent().find(".td-allprice").text());
                        let id = $(this).parent().parent().parent().parent().data("id");
                        // console.log(id);

                        $.ajax({
                            type: "get",
                            url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
                            data: {
                                uid: udpid,
                                pid: id,
                                pnum: num,
                            },
                            dataType: "json",
                            success: function (data) {
                                // console.log(data);
                            }
                        });
                        let count = $(".ck:checked").length;
                       
                        
                  
                        if (count === $(".ck").length) {
                            $("#checkAll").prop("checked", true);
                        } else {
                            $("#checkAll").prop("checked", false);
                        } 
                        getTotalPrice(); 

                    })

                    // 删除按钮 
                    $("button").click(function () {
                        // 页面中移除当前商品
                        $(this).parent().parent().remove();
                        // 获得当前商品的id 
                        let id = $(this).parent().parent().data("id");
                        $.ajax({
                            type: "get",
                            url: "http://jx.xuzhixiang.top/ap/api/cart-delete.php",
                            data: {
                                uid: udpid,
                                pid: id,
                            },
                            dataType: "json",
                            success: function (data) {
                                // console.log("成功");
                            }
                        });

                        let count = $(".ck:checked").length;
                       
                        if (count === $(".ck").length && count !=0) {
                            $("#checkAll").prop("checked", true);
                        } else {
                            $("#checkAll").prop("checked", false);
                        } 
                        getTotalPrice(); 
                    })

                    // 全选框判断 
                    //全选 单个复选框的状态和全选复选框的状态保持一致
                    /*   oCheckAll.onclick = () => {
                          for (let i = 0; i < this.ck.length; i++) {
                              this.ck[i].checked = oCheckAll.checked;
                          }
                          this.getTotalPrice(); //
                      }; */
                    $("#checkAll").click(function () {

                        $(".ck").prop("checked", $(this).prop("checked"));

                        getTotalPrice();
                    })

                    //  单选框判断
                    $(".ck").click(function () {
                        let count = 0;

                        $.each($(".ck"), function () {
                            console.log();
                            if ($(this).prop("checked")) {
                                count++;
                                
                            }
                        })

                        //判断选中的数量和总数量是否一致
                        if (count == $(".ck").length) {
                            $("#checkAll").prop("checked", true);
                           
                        } else {
                            $("#checkAll").prop("checked", false);
                        }
                        getTotalPrice();
                    })

                     
                 /*    if($(".ck:checked").length == 0){
                   
                        $("#checkAll").prop("checked")
                    } */










                    function getTotalPrice() {
                        let totalPrice = 0;
                        for (let i = 0; i < $(".ck").length; i++) {
                            //    console.log(totalPrice);
                            if ($(".ck")[i].checked) {
                                totalPrice += Number($(".td-allprice")[i].innerText);
                            }
                        }
                        $("#totalPrice span").text(totalPrice);
                        //  console.log($("#totalPrice span"));

                    }








                },



            })


        </script>
</body>

</html>